import { app, $$ } from "../experience/utils/F7.js";
import { CONF } from "../configure/Assets.js"
import Db from "../experience/db/Db.js";
import Api from "../experience/api/Api.js";
import Utils from "../experience/utils/Utils.js";
import Algorithm from "../experience/utils/Algorithm.js";
import Drawer from "../experience/drawer/Drawer.js";
import Uploader from "../component/other/Uploader.js";
import Track from "../component/route/Track.js";
import Position from "../component/route/Position.js";
import Selector from "../component/other/Selector.js";
import Coordinate from "../component/other/Coordinate.js";
import Person from "../component/location/Person.js";
import Vehicle from "../component/location/Vehicle.js";
import Measure from "../component/other/Measure.js";
import Route from "../component/route/Route.js";
import WarningV2 from "../component/warning/WarningV2.js";
import Monitor from "../component/monitor/Monitor.js";

class Olivera {
    constructor() {
        if (Olivera.instance) {
            return Olivera.instance;
        }
        Olivera.instance = this;

        this.db = new Db();
        this.api = new Api();
        this.utils = new Utils();
        this.algo = new Algorithm();
        this.drawer = new Drawer();

        this.init().then(() => {
            const edit = this.utils.getLocalStorage("edit");
            let mode = this.utils.getLocalStorage("mode");
            this.header(edit);

            if (edit) {
                new Uploader();
                new Coordinate();
                new Selector();
                new Track();
                new Position();
                new Route();
                new Monitor();

                // 修改Uploader提示信息
                $$("#upload-name-text").html("图纸版本");
                $$("#upload-code-text").html("图纸类型");
                $$("#upload-mine-code").val(mode);
            } else {
                this.timer();

                const route = this.utils.getLocalStorage("route");
                if (mode === "person") {
                    new Person();
                    new Selector();
                    new Measure();
                    new WarningV2();
                    new Monitor();
                } else {
                    if (route) {
                        new Route();
                        new Vehicle();
                    } else {
                        new Vehicle();
                        new Selector();
                        new Measure();
                    }
                }
            }

            console.log("Walküre Fly...");
        });
    }

    header(edit) {
        if (edit) {
            // 在编辑模式下需要添加操作header
            const headerDiv = `
                <header id="vp-header">
                    <button class="button button-fill color-primary" id="upload-popup">
                        <span class="icon iconfont">&#xe651;</span>
                        更新图纸
                    </button>
                    <button class="button button-fill color-primary" id="track-add">
                        <span class="icon iconfont">&#xe634;</span>
                        巷道轨迹
                    </button>
                    <button class="button button-fill color-primary" id="position-add">
                        <span class="icon iconfont">&#xe634;</span>
                        新增分站
                    </button>
                </header>
            `;
            // 在article前添加header
            $$("#article").append(headerDiv);
            $$("#upload-mine-code").attr("readonly", "readonly");
        } else {
            const vp_header_div = `
                <div id="vp-header">
                    <button class="button button-fill color-primary" id="person-positions">
                        <span class="icon iconfont">&#xe651;</span>
                        选择分站
                    </button>
                    <button class="button button-fill color-primary" id="measure">
                        <span class="icon iconfont">&#xe634;</span>
                        测量距离
                    </button>
                    <button class="button button-fill color-primary" id="person-filter">
                        <span class="icon iconfont">&#xe70d;</span>
                        查找人员
                    </button>
                    <button class="button button-fill color-primary" id="drawing-warning-area_v2">
                        <span class="icon iconfont">&#xe719;</span>
                        增加预警面
                    </button>
                    <button class="button button-fill color-primary" id="add-monitor">
                        <span class="icon iconfont">&#xe719;</span>
                        增加摄像头
                    </button>
                    <div>
                        <img src="../assets/images/person/nickname_yellow.png" alt="red"/>
                        <span style="color: black;">普通员工</span>
                    </div>
                    <div>
                        <img src="../assets/images/person/nickname_red.png" alt="red"/>
                        <span style="color: black;">领导</span>
                    </div>
                    <div style="margin-right: 40px; width: 150px;">
                        <span style="color: black;">井下人数:&nbsp;</span>
                        <span id="person-num" style="color: black;">0</span>
                    </div>
                    <div id="person-show-filter">
                        <div id="pannel-all-show" style="color: black;">
                            <input id="person-show-filter-position" type="checkbox" checked/>&nbsp;定位分站
                        </div>
                        <div id="pannel-all-show" style="color: black;">
                            <input id="person-show-filter-person" type="checkbox"/>&nbsp;井下人员
                        </div>
                        <div id="pannel-all-show" style="color: black;">
                            <input id="person-show-filter-name" type="checkbox"/>&nbsp;人员名称
                        </div>
                    </div>
                </div>
            `;
            $$("#article").append(vp_header_div);
            $$("#vehicle-locked-unlocked").hide();
        }
    }

    timer() {
        const mode = this.utils.getLocalStorage("mode");

        // 点击下载新图纸
        $$("#get-tree-maps").on("click", async () => {
            const metas = await this.api.getMetas(mode);
            if (metas.code === 0 && metas.data.length > 0) {
                await this.update(metas.data[0]);
            }
        });

        // 一分钟判断一次是否版本有更新
        setInterval(async () => {
            const config = this.algo.getConfig();
            if (config === null) return;

            const srcVer = config.mine_name;
            const metas = await this.api.getMetas(mode);
            const cmpVer = metas.data[0].mine_name;
            if (srcVer !== cmpVer) {
                $$("#get-tree-maps").show();
            }
        }, 60000);
    }

    async update(meta) {
        const meta_id = meta.meta_id;
        app.dialog.preloader("正在获取矿图...");
        const data = await this.api.getVector(meta_id);
        if (data.code === 0) {
            // 初始化config信息
            this.drawer.init(data.data.meta, data.data.layers);

            // 将从网络上取下来的数据存入数据库
            this.db.init(data.data).then(() => {
                // 从本地提取数据
                this.drawer.location().then(() => {
                    const config = this.algo.getConfig();
                    config.maxzoom = 12; config.minzoom = 8;
                    this.algo.setConfig(config);
                    $$("#get-tree-maps").hide();
                    app.dialog.close();
                });
            });
        }
    }

    // 全局初始化
    async init() {
        // 将更新按钮隐藏
        $$("#get-tree-maps").hide();
        $$("#vehicle-locked-unlocked").hide();
        this.utils.setLocalStorage("theme", false);

        // 获取配置用的code信息
        const code = await this.api.getCode();
        this.utils.setLocalStorage('code', code.data);

        // 从参数中获取模式: person - 人员定位, vehicle - 车辆定位
        let mode = this.utils.getUrlParamer("mode"), loading = false;
        if (mode === "embed" || mode === "vehicle") {
            this.utils.setLocalStorage("theme", true);
            $$(".ol-viewport").css("background", CONF.BACKGROUND);
            mode = "vehicle";
        } else {
            this.utils.setLocalStorage("theme", true);
            $$(".ol-viewport").css("background", CONF.BACKGROUND);
            mode = "person";
        }

        // 如果原来已经设置过模式,则需要和本地进行比较,如果不同则需要重新获取数据
        const localMode = this.utils.getLocalStorage("mode");
        if (localMode !== null && localMode !== mode) { loading = true; }
        this.utils.setLocalStorage("mode", mode);

        // 从参数中获取是否为编辑模式
        let edit = this.utils.getUrlParamer("edit");
        if (edit === null || edit !== "true") {
            this.utils.setLocalStorage("edit", false);
        } else {
            this.utils.setLocalStorage("edit", true);
        }

        // 从参数中获取是否为Route模式
        let route = this.utils.getUrlParamer("route");
        if (route === null || route !== "true") {
            this.utils.setLocalStorage("route", false);
        } else {
            this.utils.setLocalStorage("route", true);
        }

        // 从参数中获取vehicleid
        let vehicleId = this.utils.getUrlParamer("vehicleid");
        this.utils.setLocalStorage("vehicleId", vehicleId);

        // 判断本地是否已经有煤矿信息了
        const config = this.algo.getConfig();
        if (config === null || loading) {
            const metas = await this.api.getMetas(mode);
            if (metas.code === 0 && metas.data.length > 0) {
                await this.update(metas.data[0]);
            }
        } else {
            // 从本地获取数据
            await this.drawer.location();
        }
    }
}

new Olivera();